package com.hiray.wanandroid.ui.page

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.PagerState
import com.google.accompanist.pager.rememberPagerState
import com.hiray.wanandroid.R
import com.hiray.wanandroid.data.WanViewModel
import com.hiray.wanandroid.net.response.HomeFeed
import com.hiray.wanandroid.ui.AppNavigation
import com.hiray.wanandroid.ui.theme.WanAndroidComposeTheme
import kotlinx.coroutines.launch
import kotlin.math.absoluteValue
import kotlin.math.ceil
import kotlin.math.sign


class MainActivity : ComponentActivity() {
    @ExperimentalAnimationApi
    @ExperimentalUnitApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WanAndroidComposeTheme {
                AppNavigation()
            }
        }
    }
}

@ExperimentalAnimationApi
@ExperimentalUnitApi
@OptIn(ExperimentalPagerApi::class)
@Composable
fun MainScreen() {
    val viewModel: WanViewModel = viewModel()
    val pagerState = rememberPagerState(pageCount = 4, initialOffscreenLimit = 4, initialPage = 0)
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.TopCenter
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize(), verticalArrangement = Arrangement.Top
        ) {
            HorizontalPager(state = pagerState, Modifier.weight(1f)) { page ->
                when (page) {
                    0 -> MainPage(viewModel)
                    1 -> SquarePage()
                    2 -> PublicPage()
                    3 -> MePage()
                }
            }
            MainBottomBar(pagerState)
        }
    }
}

@ExperimentalPagerApi
@Composable
private fun MainBottomBar(pagerState: PagerState) {
    val scope = rememberCoroutineScope()

    BottomNavigation(backgroundColor = Color.White) {
        MainTabItem(
            R.drawable.ic_bottom_tab_main,
            selected = pagerState.currentPage == 0,
            onClick = {
                scope.launch { pagerState.animateScrollToPage(0) }
            },
            tintColor = getTabTintColor(0, pagerState)
        )
        MainTabItem(
            R.drawable.ic_bottom_tab_square,
            selected = pagerState.currentPage == 1,
            onClick = {
                scope.launch { pagerState.animateScrollToPage(1) }
            },
            tintColor = getTabTintColor(1, pagerState)

        )
        MainTabItem(
            R.drawable.ic_bottom_tab_public,
            selected = pagerState.currentPage == 2,
            onClick = {
                scope.launch { pagerState.animateScrollToPage(2) }
            },
            tintColor = getTabTintColor(2, pagerState)
        )
        MainTabItem(
            R.drawable.ic_bottom_tab_mine,
            selected = pagerState.currentPage == 3,
            onClick = {
                scope.launch { pagerState.animateScrollToPage(3) }
            },
            tintColor = getTabTintColor(3, pagerState)
        )
    }
}

@ExperimentalPagerApi
@Composable
fun getTabTintColor(
    page: Int,
    pagerState: PagerState
): Color {
    val pageOffset = pagerState.currentPageOffset
    val adjacentPage =
        (pagerState.currentPage + ceil(pageOffset.absoluteValue) * pageOffset.sign).toInt()
    val currFraction = (1 - pageOffset.absoluteValue).coerceIn(0f, 1f)
    val currColor = lerp(Color.DarkGray, MaterialTheme.colors.primary, currFraction)
    val adjacentFraction = pageOffset.absoluteValue.coerceIn(0f, 1f)
    val adjacentColor = lerp(Color.DarkGray, MaterialTheme.colors.primary, adjacentFraction)

    return when (page) {
        pagerState.currentPage -> currColor
        adjacentPage -> adjacentColor
        else -> Color.DarkGray
    }
}

@Composable
fun RowScope.MainTabItem(vectorRes: Int, selected: Boolean, onClick: () -> Unit, tintColor: Color) {
    this.BottomNavigationItem(selected = selected, onClick = onClick, icon = {
        Icon(
            imageVector = ImageVector.vectorResource(vectorRes),
            contentDescription = "",
            tint = tintColor,
            modifier = Modifier
                .size(36.dp)
                .padding(4.dp)
        )
    }, modifier = Modifier.padding(4.dp))
}

@ExperimentalUnitApi
@Preview(showBackground = true)
@Composable
fun PreviewSquareViewList() {
    val item = HomeFeed("架构在美团实践中的感悟", "MVI 架构妙用！", "掘金", "rengwuxian", "掘金", "13 hours ago")
    item.liked = true
    val list = arrayListOf(item, item, item, item)
    LazyColumn {
        items(list) { item ->
            HomeFeedItem(feed = item)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMainBottomBar() {
    BottomNavigation(backgroundColor = Color.White) {
        MainTabItem(R.drawable.ic_bottom_tab_main, selected = true, onClick = {
        }, MaterialTheme.colors.primary)
        MainTabItem(R.drawable.ic_bottom_tab_square, selected = false, onClick = {
        }, Color.DarkGray)
        MainTabItem(R.drawable.ic_bottom_tab_public, selected = false, onClick = {
        }, Color.DarkGray)
        MainTabItem(R.drawable.ic_bottom_tab_mine, selected = false, onClick = {
        }, Color.DarkGray)
    }
}